<template>
  <el-dialog v-model="show" title="Tips" width="30%">
    <!-- conent-start -->
    <el-form label-width="50px" :model="formData" style="max-width: 460px">
      <el-form-item label="姓名">
        <el-input disabled v-model="formData.name" />
      </el-form-item>
      <el-form-item label="性别">
        <el-input disabled v-model="formData.sex" />
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="formData.addr" />
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="formData.age" />
      </el-form-item>
      <el-form-item label="生日">
        <el-input v-model="formData.birth" />
      </el-form-item>
    </el-form>

    <!-- content-end -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">Cancel</el-button>
        <el-button type="primary" @click="handleConfirmSure">Confirm</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
export default defineComponent({
  props: ['dialogVisible', 'formLabelAlign'],
  setup(props, context) {
    const show = ref(props.dialogVisible)
    const formData = ref(props.formLabelAlign)
    watch(
      () => props.dialogVisible,
      (res) => {
        show.value = res
      }
    )

    watch(
      () => props.formLabelAlign,
      (res) => {
        formData.value = res
        console.log('res:', res)
      }
    )

    // console.log(props.dialogVisible, 'dialogVisible')
    const handleConfirmSure = () => {
      // 通知父组件，关闭弹出框，调用接口
      context.emit('onClose')
    }

    const handleCancel = () => {
      context.emit('onCancel')
    }

    return { handleConfirmSure, handleCancel, show, formData }
  }
})
</script>
